<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="getNews">获取新闻</button>
        <template v-for="item in list"> 
            <h1 >{{item.title}}</h1>
            <h3>{{item.source}}</h3>
            <img :src="item.img" alt="">
            <p>{{item.content}}</p>
        </template>
        
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>  
    <script src="ajax.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                list:[]
            },
            methods:{
                getNews(){
                    ajax({
                        method: "GET",
						url: 'http://ali-news.showapi.com/newsList?needContent=1',
						data: {
							// channelId: cityObj[this.city]
                            
						},
						headers: {
							"Authorization": "APPCODE 7ed4f00ed62e49899bc07d8014a3c2d0"
						},
						callback: (res) => {
                            // console.log(res)
							var newsObj = JSON.parse(res)
							// console.log(newsObj)
							var list = newsObj.showapi_res_body.pagebean.contentlist;
							this.list = list;
							console.log(list)

						}
                    })
                }
            },
            watch:{
                list(){

                }
            }
        })
    </script>
</body>
</html>